<template>
<div>
    <div class="input-group">
        <div class="input-group-addon">用户角色</div>
        <span class="form-control" v-if="userEntity.anonymous == 1">匿名用户</span><span v-else>注册用户</span>
    </div>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">来　　源</div>
        <span class="form-control">{{utmSource}}</span>
    </div>
    <template v-if="userEntity.anonymous == 0">
        <div class="input-group" style="margin-top: 8px;">
            <div class="input-group-addon">用户名</div>
            <span class="form-control" >{{userEntity.userName}}</span>
        </div>
    </template>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">昵　　称</div>
        <input type="text" class="form-control" placeholder="请输入昵称" v-model="userEntity.nickName">
    </div>

    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">地　　址</div>
        <input type="text" class="form-control" placeholder="请输入地址" v-model="userEntity.address">
    </div>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">邮　　件</div>
        <input type="text" class="form-control" placeholder="请输入邮件" v-model="userEntity.email">
    </div>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">消息编号</div>
        <span class="form-control" style="overflow:auto;">{{userEntity.messageId}}</span>
    </div>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">创建时间</div>
        <span class="form-control">{{new Date(userEntity.createTime).format('yyyy-MM-dd hh:mm:ss')}}</span>
    </div>
    <div class="input-group" style="margin-top: 8px;">
        <div class="input-group-addon">备　　注</div>
        <textarea class="form-control" placeholder="请输入备注" v-model="userEntity.remark" style="resize: none;"></textarea>
    </div>
    <div style="margin-top: 8px;"><button class="btn btn-info btn-block" @click="updateUserInfo" :disabled="loading">更新信息</button></div>

    <div style="margin-top: 8px;text-align: center;" v-if="loading">
        <i style="margin-top: 8px;color: #13758c;" class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
    </div>
</div>
</template>
<script>

    export default {
        data(){
            return {
                userEntity:{},
                loading:false
            }
        },
        props: ["user","utmSource"],
        mounted:function () {
            this.userEntity=JSON.parse(JSON.stringify(this.user));
        },
        methods:{
            updateUserInfo:function () {
                const that = this;
                that.loading = true;
                let request = {
                    id:that.userEntity.id,
                    nickName:that.userEntity.nickName,
                    address:that.userEntity.address,
                    remark:that.userEntity.remark,
                    email:that.userEntity.email
                };
                $.post('user/update',request,function () {
                    that.loading = false;
                    that.user.nickName = that.userEntity.nickName;
                    that.user.address = that.userEntity.address;
                    that.user.email = that.userEntity.email;
                    that.user.remark = that.userEntity.remark;
                })
            }
        },
        watch: {
            user: function (user) {
                this.userEntity=JSON.parse(JSON.stringify(user));
            }
        }
    }
</script>